<script setup lang='ts'>
interface Props {
  place?: 'betSlip' | 'myBets'
}
defineOptions({ name: 'AppSportsNotLogin' })
withDefaults(defineProps<Props>(), {
  place: 'betSlip'
})
</script>

<template>
  <div class="w-full flex flex-col items-center text-[12px] text-[var(--color-text-white-1)] leading-[18px]">
    <div class="flex items-center mb-[16px]">
      <BaseIcon name="uni-mybets" class="text-[20px]" style="--tg-base-icon-color:#849194;" />
      <span class="ml-[8px] ">{{ $t('sports_login_first') }}</span>
    </div>
    <AppSportsBaseButton class="w-full mb-[16px]" @click="i18nNavigateTo('/login/signin')">
      {{ $t('signin') }}
    </AppSportsBaseButton>
    <div>
      <span>{{ $t('you_have_no_account') }}</span>
      <span class="underline font-semibold cursor-pointer hover:no-underline"
        @click="i18nNavigateTo('/login/regist')">{{ $t('join_now') }}</span>
    </div>
  </div>
</template>

<style lang='scss' scoped></style>
